<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1922698" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">图层 613 拷贝 2</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">笑脸 满意 服务</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">不满意</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">呼叫拨号</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">挂断</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">未接电话</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">自定义区域</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">放大01</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">061操作_全屏放大3</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">新建分组</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">3-02公厕指示牌</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec1f;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xec1f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">5-16 水渠</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">5-15 水塔</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">5-14 工地</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">5-13 变压室</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">5-11 液化气站点</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">4-17 射灯</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">4-15 环卫取水栓</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">4-14 景观石</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">4-13 绿地维护设施</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">4-12 绿化取水栓</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">4-11 行道树</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">3-20 门楼牌坊</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">3-19 门牌</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">3-18 垃圾池</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">3-17 店招店牌</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">3-16 垃圾中转站</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">3-15 移动厕所</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">2-55 停车收费告示牌</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">2-54 停车告示牌</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">2-53 无障碍设施指路牌</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">2-52 应急避难指示牌</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">2-51 救助站指示牌</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">2-50 交警立杆</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">2-49 交通反视镜</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">2-48 交通涵洞</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">2-47 交通控制箱</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">2-46 减速带</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">2-45 道路侧平石</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">2-44 车行道</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">2-43 盲道</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">2-42 高架立交桥</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">2-41 公安警示牌</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">2-40 公安指示牌</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">2-39 公共自行车站点</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">2-38 交通指路牌</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">2-37 公交站牌</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">2-36 人行道</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">2-32 阻车桩</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">1-75 河道标志、警示牌</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">1-74 通风设施</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">1-73 公安交接箱</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">1-72 公交立杆</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">1-71 路灯配电箱</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">1-70 不明（特殊）立杆</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">1-69 输油（气）标志桩</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">1-68 移动通信基站</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">1-67 通信交接箱</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">1-66 网络控制箱</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">1-65 民用水井</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">1-64 露天燃气热力管道</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">1-63 跨河管线</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">1-62 通讯井盖</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">1-61 无主井盖</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">1-60 消防井盖</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">1-59 检修井</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">5-09文物古迹</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">5-08防汛墙</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">5-07水域护栏</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">5-06水域附属设施</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">5-05重大危险源</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">5-04液化气站</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">5-03车辆加油（气电站）</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">5-02公房地下室</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">5-01人防工事</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">4-10喷泉</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">4-09绿地附属设施</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">4-08绿地护栏</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">4-07街头座椅</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">4-06雕塑</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">4-05花架花钵</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">4-04护树设施</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">4-03独立树</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">4-02行树</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">4-01古树名木</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">3-13噪声显示屏</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">3-12污水检测器</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">3-11污水口监测站</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">3-10环保检测站</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">3-09气象监测站</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">3-08宣传栏</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">3-07牌匾标识</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">3-06户外广告</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">3-05垃圾箱</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">3-04垃圾间（楼）</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">3-03化粪池</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">3-01公共厕所</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">2-31港监设施</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">2-30水域标示牌</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">2-29栈桥</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">2-28铁道口设施</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">2-27存车支架</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">2-26自行车租赁点</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">2-25非机动车停放点</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">2-24道路隔音屏</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">2-23道路信息显示屏</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">2-22柔性隔离体</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">2-21便道桩</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">2-20人行横道庄</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">2-19安全岛</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">2-18防撞桶</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">2-17交通护栏</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">2-16交通岗亭</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">2-15交通信号设施</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">2-14交通信号灯</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">2-13地名牌</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">2-12路名牌</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">2-11限高架标志</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">2-10交通标志牌</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">2-09跨河桥</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">2-08立交桥</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">2-07地下通道</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">2-06过街天桥</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">2-05出租车站牌</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">2-04公交站亭</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">2-03停车咪表</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">2-02立体车库</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">2-01停车场</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">58-晒衣架</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">57-露天燃气管道</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">56-跨河管道</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">55-防蚊闸</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">54-充电桩</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">53-自助缴费机</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">52-休息亭</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">51-治安岗亭</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">50-监控电子眼</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">49-燃气调压站（箱）</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">48-变压器（箱）</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">47-高压线铁塔</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">46-健身设施</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">45-自动售货机</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">44-售货亭</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">43-信息亭</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">42-邮筒</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">41-电话亭</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">40-报刊亭</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">39-景观灯</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">38-地灯</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">37-路灯</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">36-输油（气）标志</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">35-旗杆</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">34-不明立杆</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">33-特殊立杆</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">32-交通立杆</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">31-通信立杆</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">30-电力立杆</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">29-电力设施标识牌</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">28-电力设施</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">27-通信交接箱</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">26-沟槽厕所盖板</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">25-供水器</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">24-水井</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">23-不明井盖</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">22-特殊井盖</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">21-输油（气）井盖</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">20-公交井盖</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">19-中水井盖</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">18-化粪池井盖</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">17-电缆井盖</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">16-邮政井盖</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">15-信号灯电源井盖</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">14-园林井盖</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">13-消防设施</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">12-公安井盖</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">11-燃气井盖</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">10-热力井盖</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">09-网络井盖</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">08-电视井盖</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">07-通信井盖</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">06-路灯井盖</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">05-电力井盖</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">04-雨水箅子</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">03--雨水井盖</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">02-污水井盖</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">01-上水井盖</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">002</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">001</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">矢量智能对象1_复制</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">矢量智能对象_复制</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">对勾</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">用户名</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">叉</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec1e;</span>
                <div class="name">点</div>
                <div class="code-name">&amp;#xec1e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">001</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">矢量智能对象_复制</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">矢量智能对象8_复制</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">矢量智能对象10_复制</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">矢量智能对象1_复制</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">矢量智能对象9_复制</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">矢量智能对象4_复制</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">矢量智能对象7_复制</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">矢量智能对象6_复制</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">矢量智能对象3_复制</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">矢量智能对象11_复制</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">矢量智能对象5_复制</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">矢量智能对象_复制</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1632907794505') format('woff2'),
       url('iconfont.woff?t=1632907794505') format('woff'),
       url('iconfont.ttf?t=1632907794505') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconshouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.iconshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkefu1"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.iconkefu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkefu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.iconkefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontuceng613kaobei2"></span>
            <div class="name">
              图层 613 拷贝 2
            </div>
            <div class="code-name">.icontuceng613kaobei2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaolianmanyifuwu"></span>
            <div class="name">
              笑脸 满意 服务
            </div>
            <div class="code-name">.iconxiaolianmanyifuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbumanyi"></span>
            <div class="name">
              不满意
            </div>
            <div class="code-name">.iconbumanyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhujiaobohao"></span>
            <div class="name">
              呼叫拨号
            </div>
            <div class="code-name">.iconhujiaobohao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguaduan"></span>
            <div class="name">
              挂断
            </div>
            <div class="code-name">.iconguaduan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icondianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweijiedianhua"></span>
            <div class="name">
              未接电话
            </div>
            <div class="code-name">.iconweijiedianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzidingyiquyu"></span>
            <div class="name">
              自定义区域
            </div>
            <div class="code-name">.iconzidingyiquyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbangzhu"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.iconbangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfangda"></span>
            <div class="name">
              放大01
            </div>
            <div class="code-name">.iconfangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaozuo_quanpingfangda"></span>
            <div class="name">
              061操作_全屏放大3
            </div>
            <div class="code-name">.iconcaozuo_quanpingfangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontianjiadaofenzu"></span>
            <div class="name">
              新建分组
            </div>
            <div class="code-name">.icontianjiadaofenzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-02gongcezhishipai"></span>
            <div class="name">
              3-02公厕指示牌
            </div>
            <div class="code-name">.icon3-02gongcezhishipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-right"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconarrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-left"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconarrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconarrow-right-copy"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.iconarrow-right-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-16shuiqu"></span>
            <div class="name">
              5-16 水渠
            </div>
            <div class="code-name">.icon5-16shuiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-15shuita"></span>
            <div class="name">
              5-15 水塔
            </div>
            <div class="code-name">.icon5-15shuita
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-14gongdi"></span>
            <div class="name">
              5-14 工地
            </div>
            <div class="code-name">.icon5-14gongdi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-13bianyashi"></span>
            <div class="name">
              5-13 变压室
            </div>
            <div class="code-name">.icon5-13bianyashi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-11yehuaqizhandian"></span>
            <div class="name">
              5-11 液化气站点
            </div>
            <div class="code-name">.icon5-11yehuaqizhandian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-17shedeng"></span>
            <div class="name">
              4-17 射灯
            </div>
            <div class="code-name">.icon4-17shedeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-15huanweiqushuishuan"></span>
            <div class="name">
              4-15 环卫取水栓
            </div>
            <div class="code-name">.icon4-15huanweiqushuishuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-14jingguanshi"></span>
            <div class="name">
              4-14 景观石
            </div>
            <div class="code-name">.icon4-14jingguanshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-13lvdiweihusheshi"></span>
            <div class="name">
              4-13 绿地维护设施
            </div>
            <div class="code-name">.icon4-13lvdiweihusheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-12lvhuaqushuishuan"></span>
            <div class="name">
              4-12 绿化取水栓
            </div>
            <div class="code-name">.icon4-12lvhuaqushuishuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-11hangdaoshu"></span>
            <div class="name">
              4-11 行道树
            </div>
            <div class="code-name">.icon4-11hangdaoshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-20menloupaifang"></span>
            <div class="name">
              3-20 门楼牌坊
            </div>
            <div class="code-name">.icon3-20menloupaifang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-19menpai"></span>
            <div class="name">
              3-19 门牌
            </div>
            <div class="code-name">.icon3-19menpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-18lajichi"></span>
            <div class="name">
              3-18 垃圾池
            </div>
            <div class="code-name">.icon3-18lajichi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-17dianzhaodianpai"></span>
            <div class="name">
              3-17 店招店牌
            </div>
            <div class="code-name">.icon3-17dianzhaodianpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-16lajizhongzhuanzhan"></span>
            <div class="name">
              3-16 垃圾中转站
            </div>
            <div class="code-name">.icon3-16lajizhongzhuanzhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-15yidongcesuo"></span>
            <div class="name">
              3-15 移动厕所
            </div>
            <div class="code-name">.icon3-15yidongcesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-55tingcheshoufeigaoshipai"></span>
            <div class="name">
              2-55 停车收费告示牌
            </div>
            <div class="code-name">.icon2-55tingcheshoufeigaoshipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-54tingchegaoshipai"></span>
            <div class="name">
              2-54 停车告示牌
            </div>
            <div class="code-name">.icon2-54tingchegaoshipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-53wuzhangaisheshizhilupai"></span>
            <div class="name">
              2-53 无障碍设施指路牌
            </div>
            <div class="code-name">.icon2-53wuzhangaisheshizhilupai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-52yingjibinanzhishipai"></span>
            <div class="name">
              2-52 应急避难指示牌
            </div>
            <div class="code-name">.icon2-52yingjibinanzhishipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-51jiuzhuzhanzhishipai"></span>
            <div class="name">
              2-51 救助站指示牌
            </div>
            <div class="code-name">.icon2-51jiuzhuzhanzhishipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-50jiaojingligan"></span>
            <div class="name">
              2-50 交警立杆
            </div>
            <div class="code-name">.icon2-50jiaojingligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-49jiaotongfanshijing"></span>
            <div class="name">
              2-49 交通反视镜
            </div>
            <div class="code-name">.icon2-49jiaotongfanshijing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-48jiaotonghandong"></span>
            <div class="name">
              2-48 交通涵洞
            </div>
            <div class="code-name">.icon2-48jiaotonghandong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-47jiaotongkongzhixiang"></span>
            <div class="name">
              2-47 交通控制箱
            </div>
            <div class="code-name">.icon2-47jiaotongkongzhixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-46jiansudai"></span>
            <div class="name">
              2-46 减速带
            </div>
            <div class="code-name">.icon2-46jiansudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-45daolucepingshi"></span>
            <div class="name">
              2-45 道路侧平石
            </div>
            <div class="code-name">.icon2-45daolucepingshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-44chehangdao"></span>
            <div class="name">
              2-44 车行道
            </div>
            <div class="code-name">.icon2-44chehangdao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-43mangdao"></span>
            <div class="name">
              2-43 盲道
            </div>
            <div class="code-name">.icon2-43mangdao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-42gaojialijiaoqiao"></span>
            <div class="name">
              2-42 高架立交桥
            </div>
            <div class="code-name">.icon2-42gaojialijiaoqiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-41gonganjingshipai"></span>
            <div class="name">
              2-41 公安警示牌
            </div>
            <div class="code-name">.icon2-41gonganjingshipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-40gonganzhishipai"></span>
            <div class="name">
              2-40 公安指示牌
            </div>
            <div class="code-name">.icon2-40gonganzhishipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-39gonggongzihangchezhandian"></span>
            <div class="name">
              2-39 公共自行车站点
            </div>
            <div class="code-name">.icon2-39gonggongzihangchezhandian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-38jiaotongzhilupai"></span>
            <div class="name">
              2-38 交通指路牌
            </div>
            <div class="code-name">.icon2-38jiaotongzhilupai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-37gongjiaozhanpai"></span>
            <div class="name">
              2-37 公交站牌
            </div>
            <div class="code-name">.icon2-37gongjiaozhanpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-36renhangdao"></span>
            <div class="name">
              2-36 人行道
            </div>
            <div class="code-name">.icon2-36renhangdao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-32zuchezhuang"></span>
            <div class="name">
              2-32 阻车桩
            </div>
            <div class="code-name">.icon2-32zuchezhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-75hedaobiaozhijingshipai"></span>
            <div class="name">
              1-75 河道标志、警示牌
            </div>
            <div class="code-name">.icon1-75hedaobiaozhijingshipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-74tongfengsheshi"></span>
            <div class="name">
              1-74 通风设施
            </div>
            <div class="code-name">.icon1-74tongfengsheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-73gonganjiaojiexiang"></span>
            <div class="name">
              1-73 公安交接箱
            </div>
            <div class="code-name">.icon1-73gonganjiaojiexiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-72gongjiaoligan"></span>
            <div class="name">
              1-72 公交立杆
            </div>
            <div class="code-name">.icon1-72gongjiaoligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-71ludengpeidianxiang"></span>
            <div class="name">
              1-71 路灯配电箱
            </div>
            <div class="code-name">.icon1-71ludengpeidianxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-70bumingteshuligan"></span>
            <div class="name">
              1-70 不明（特殊）立杆
            </div>
            <div class="code-name">.icon1-70bumingteshuligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-69shuyouqibiaozhizhuang"></span>
            <div class="name">
              1-69 输油（气）标志桩
            </div>
            <div class="code-name">.icon1-69shuyouqibiaozhizhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-68yidongtongxinjizhan"></span>
            <div class="name">
              1-68 移动通信基站
            </div>
            <div class="code-name">.icon1-68yidongtongxinjizhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-67tongxinjiaojiexiang"></span>
            <div class="name">
              1-67 通信交接箱
            </div>
            <div class="code-name">.icon1-67tongxinjiaojiexiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-66wangluokongzhixiang"></span>
            <div class="name">
              1-66 网络控制箱
            </div>
            <div class="code-name">.icon1-66wangluokongzhixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-65minyongshuijing"></span>
            <div class="name">
              1-65 民用水井
            </div>
            <div class="code-name">.icon1-65minyongshuijing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-64loutianranqireliguandao"></span>
            <div class="name">
              1-64 露天燃气热力管道
            </div>
            <div class="code-name">.icon1-64loutianranqireliguandao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-63kuaheguanxian"></span>
            <div class="name">
              1-63 跨河管线
            </div>
            <div class="code-name">.icon1-63kuaheguanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-62tongxunjinggai"></span>
            <div class="name">
              1-62 通讯井盖
            </div>
            <div class="code-name">.icon1-62tongxunjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-61wuzhujinggai"></span>
            <div class="name">
              1-61 无主井盖
            </div>
            <div class="code-name">.icon1-61wuzhujinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-60xiaofangjinggai"></span>
            <div class="name">
              1-60 消防井盖
            </div>
            <div class="code-name">.icon1-60xiaofangjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon1-59jianxiujing"></span>
            <div class="name">
              1-59 检修井
            </div>
            <div class="code-name">.icon1-59jianxiujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-09wenwuguji"></span>
            <div class="name">
              5-09文物古迹
            </div>
            <div class="code-name">.icon5-09wenwuguji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-08fangxunqiang"></span>
            <div class="name">
              5-08防汛墙
            </div>
            <div class="code-name">.icon5-08fangxunqiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-07shuiyuhulan"></span>
            <div class="name">
              5-07水域护栏
            </div>
            <div class="code-name">.icon5-07shuiyuhulan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-06shuiyufushusheshi"></span>
            <div class="name">
              5-06水域附属设施
            </div>
            <div class="code-name">.icon5-06shuiyufushusheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-05zhongdaweixianyuan"></span>
            <div class="name">
              5-05重大危险源
            </div>
            <div class="code-name">.icon5-05zhongdaweixianyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-04yehuaqizhan"></span>
            <div class="name">
              5-04液化气站
            </div>
            <div class="code-name">.icon5-04yehuaqizhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-03cheliangjiayouqidianzhan"></span>
            <div class="name">
              5-03车辆加油（气电站）
            </div>
            <div class="code-name">.icon5-03cheliangjiayouqidianzhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-02gongfangdixiashi"></span>
            <div class="name">
              5-02公房地下室
            </div>
            <div class="code-name">.icon5-02gongfangdixiashi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon5-01renfanggongshi"></span>
            <div class="name">
              5-01人防工事
            </div>
            <div class="code-name">.icon5-01renfanggongshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-10penquan"></span>
            <div class="name">
              4-10喷泉
            </div>
            <div class="code-name">.icon4-10penquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-09lvdifushusheshi"></span>
            <div class="name">
              4-09绿地附属设施
            </div>
            <div class="code-name">.icon4-09lvdifushusheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-08lvdihulan"></span>
            <div class="name">
              4-08绿地护栏
            </div>
            <div class="code-name">.icon4-08lvdihulan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-07jietouzuoyi"></span>
            <div class="name">
              4-07街头座椅
            </div>
            <div class="code-name">.icon4-07jietouzuoyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-06diaosu"></span>
            <div class="name">
              4-06雕塑
            </div>
            <div class="code-name">.icon4-06diaosu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-05huajiahuabo"></span>
            <div class="name">
              4-05花架花钵
            </div>
            <div class="code-name">.icon4-05huajiahuabo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-04hushusheshi"></span>
            <div class="name">
              4-04护树设施
            </div>
            <div class="code-name">.icon4-04hushusheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-03dulishu"></span>
            <div class="name">
              4-03独立树
            </div>
            <div class="code-name">.icon4-03dulishu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-02hangshu"></span>
            <div class="name">
              4-02行树
            </div>
            <div class="code-name">.icon4-02hangshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon4-01gushumingmu"></span>
            <div class="name">
              4-01古树名木
            </div>
            <div class="code-name">.icon4-01gushumingmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-13zaoshengxianshiping"></span>
            <div class="name">
              3-13噪声显示屏
            </div>
            <div class="code-name">.icon3-13zaoshengxianshiping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-12wushuijianceqi"></span>
            <div class="name">
              3-12污水检测器
            </div>
            <div class="code-name">.icon3-12wushuijianceqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-11wushuikoujiancezhan"></span>
            <div class="name">
              3-11污水口监测站
            </div>
            <div class="code-name">.icon3-11wushuikoujiancezhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-10huanbaojiancezhan"></span>
            <div class="name">
              3-10环保检测站
            </div>
            <div class="code-name">.icon3-10huanbaojiancezhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-09qixiangjiancezhan"></span>
            <div class="name">
              3-09气象监测站
            </div>
            <div class="code-name">.icon3-09qixiangjiancezhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-08xuanchuanlan"></span>
            <div class="name">
              3-08宣传栏
            </div>
            <div class="code-name">.icon3-08xuanchuanlan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-07paibianbiaoshi"></span>
            <div class="name">
              3-07牌匾标识
            </div>
            <div class="code-name">.icon3-07paibianbiaoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-06huwaiguanggao"></span>
            <div class="name">
              3-06户外广告
            </div>
            <div class="code-name">.icon3-06huwaiguanggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-05lajixiang"></span>
            <div class="name">
              3-05垃圾箱
            </div>
            <div class="code-name">.icon3-05lajixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-04lajijianlou"></span>
            <div class="name">
              3-04垃圾间（楼）
            </div>
            <div class="code-name">.icon3-04lajijianlou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-03huafenchi"></span>
            <div class="name">
              3-03化粪池
            </div>
            <div class="code-name">.icon3-03huafenchi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon3-01gonggongcesuo"></span>
            <div class="name">
              3-01公共厕所
            </div>
            <div class="code-name">.icon3-01gonggongcesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-31gangjiansheshi"></span>
            <div class="name">
              2-31港监设施
            </div>
            <div class="code-name">.icon2-31gangjiansheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-30shuiyubiaoshipai"></span>
            <div class="name">
              2-30水域标示牌
            </div>
            <div class="code-name">.icon2-30shuiyubiaoshipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-29zhanqiao"></span>
            <div class="name">
              2-29栈桥
            </div>
            <div class="code-name">.icon2-29zhanqiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-28tiedaokousheshi"></span>
            <div class="name">
              2-28铁道口设施
            </div>
            <div class="code-name">.icon2-28tiedaokousheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-27cunchezhijia"></span>
            <div class="name">
              2-27存车支架
            </div>
            <div class="code-name">.icon2-27cunchezhijia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-26zihangchezulindian"></span>
            <div class="name">
              2-26自行车租赁点
            </div>
            <div class="code-name">.icon2-26zihangchezulindian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-25feijidongchetingfangdian"></span>
            <div class="name">
              2-25非机动车停放点
            </div>
            <div class="code-name">.icon2-25feijidongchetingfangdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-24daolugeyinping"></span>
            <div class="name">
              2-24道路隔音屏
            </div>
            <div class="code-name">.icon2-24daolugeyinping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-23daoluxinxixianshiping"></span>
            <div class="name">
              2-23道路信息显示屏
            </div>
            <div class="code-name">.icon2-23daoluxinxixianshiping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-22rouxinggeliti"></span>
            <div class="name">
              2-22柔性隔离体
            </div>
            <div class="code-name">.icon2-22rouxinggeliti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-21biandaozhuang"></span>
            <div class="name">
              2-21便道桩
            </div>
            <div class="code-name">.icon2-21biandaozhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-20renhanghengdaozhuang"></span>
            <div class="name">
              2-20人行横道庄
            </div>
            <div class="code-name">.icon2-20renhanghengdaozhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-19anquandao"></span>
            <div class="name">
              2-19安全岛
            </div>
            <div class="code-name">.icon2-19anquandao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-18fangzhuangtong"></span>
            <div class="name">
              2-18防撞桶
            </div>
            <div class="code-name">.icon2-18fangzhuangtong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-17jiaotonghulan"></span>
            <div class="name">
              2-17交通护栏
            </div>
            <div class="code-name">.icon2-17jiaotonghulan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-16jiaotonggangting"></span>
            <div class="name">
              2-16交通岗亭
            </div>
            <div class="code-name">.icon2-16jiaotonggangting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-15jiaotongxinhaosheshi"></span>
            <div class="name">
              2-15交通信号设施
            </div>
            <div class="code-name">.icon2-15jiaotongxinhaosheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-14jiaotongxinhaodeng"></span>
            <div class="name">
              2-14交通信号灯
            </div>
            <div class="code-name">.icon2-14jiaotongxinhaodeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-13dimingpai"></span>
            <div class="name">
              2-13地名牌
            </div>
            <div class="code-name">.icon2-13dimingpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-12lumingpai"></span>
            <div class="name">
              2-12路名牌
            </div>
            <div class="code-name">.icon2-12lumingpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-11xiangaojiabiaozhi"></span>
            <div class="name">
              2-11限高架标志
            </div>
            <div class="code-name">.icon2-11xiangaojiabiaozhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-10jiaotongbiaozhipai"></span>
            <div class="name">
              2-10交通标志牌
            </div>
            <div class="code-name">.icon2-10jiaotongbiaozhipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-09kuaheqiao"></span>
            <div class="name">
              2-09跨河桥
            </div>
            <div class="code-name">.icon2-09kuaheqiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-08lijiaoqiao"></span>
            <div class="name">
              2-08立交桥
            </div>
            <div class="code-name">.icon2-08lijiaoqiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-07dixiatongdao"></span>
            <div class="name">
              2-07地下通道
            </div>
            <div class="code-name">.icon2-07dixiatongdao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-06guojietianqiao"></span>
            <div class="name">
              2-06过街天桥
            </div>
            <div class="code-name">.icon2-06guojietianqiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-05chuzuchezhanpai"></span>
            <div class="name">
              2-05出租车站牌
            </div>
            <div class="code-name">.icon2-05chuzuchezhanpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-04gongjiaozhanting"></span>
            <div class="name">
              2-04公交站亭
            </div>
            <div class="code-name">.icon2-04gongjiaozhanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-03tingchemibiao"></span>
            <div class="name">
              2-03停车咪表
            </div>
            <div class="code-name">.icon2-03tingchemibiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-02liticheku"></span>
            <div class="name">
              2-02立体车库
            </div>
            <div class="code-name">.icon2-02liticheku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon2-01tingchechang"></span>
            <div class="name">
              2-01停车场
            </div>
            <div class="code-name">.icon2-01tingchechang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon58-shaiyijia"></span>
            <div class="name">
              58-晒衣架
            </div>
            <div class="code-name">.icon58-shaiyijia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon57-loutianranqiguandao"></span>
            <div class="name">
              57-露天燃气管道
            </div>
            <div class="code-name">.icon57-loutianranqiguandao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon56-kuaheguandao"></span>
            <div class="name">
              56-跨河管道
            </div>
            <div class="code-name">.icon56-kuaheguandao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon55-fangwenzha"></span>
            <div class="name">
              55-防蚊闸
            </div>
            <div class="code-name">.icon55-fangwenzha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon54-chongdianzhuang"></span>
            <div class="name">
              54-充电桩
            </div>
            <div class="code-name">.icon54-chongdianzhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon53-zizhujiaofeiji"></span>
            <div class="name">
              53-自助缴费机
            </div>
            <div class="code-name">.icon53-zizhujiaofeiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon52-xiuxiting"></span>
            <div class="name">
              52-休息亭
            </div>
            <div class="code-name">.icon52-xiuxiting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon51-zhiangangting"></span>
            <div class="name">
              51-治安岗亭
            </div>
            <div class="code-name">.icon51-zhiangangting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon50-jiankongdianziyan"></span>
            <div class="name">
              50-监控电子眼
            </div>
            <div class="code-name">.icon50-jiankongdianziyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon49-ranqitiaoyazhanxiang"></span>
            <div class="name">
              49-燃气调压站（箱）
            </div>
            <div class="code-name">.icon49-ranqitiaoyazhanxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon48-bianyaqixiang"></span>
            <div class="name">
              48-变压器（箱）
            </div>
            <div class="code-name">.icon48-bianyaqixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon47-gaoyaxiantieta"></span>
            <div class="name">
              47-高压线铁塔
            </div>
            <div class="code-name">.icon47-gaoyaxiantieta
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon46-jianshensheshi"></span>
            <div class="name">
              46-健身设施
            </div>
            <div class="code-name">.icon46-jianshensheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon45-zidongshouhuoji"></span>
            <div class="name">
              45-自动售货机
            </div>
            <div class="code-name">.icon45-zidongshouhuoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon44-shouhuoting"></span>
            <div class="name">
              44-售货亭
            </div>
            <div class="code-name">.icon44-shouhuoting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon43-xinxiting"></span>
            <div class="name">
              43-信息亭
            </div>
            <div class="code-name">.icon43-xinxiting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon42-youtong"></span>
            <div class="name">
              42-邮筒
            </div>
            <div class="code-name">.icon42-youtong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon41-dianhuating"></span>
            <div class="name">
              41-电话亭
            </div>
            <div class="code-name">.icon41-dianhuating
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon40-baokanting"></span>
            <div class="name">
              40-报刊亭
            </div>
            <div class="code-name">.icon40-baokanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon39-jingguandeng"></span>
            <div class="name">
              39-景观灯
            </div>
            <div class="code-name">.icon39-jingguandeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon38-dideng"></span>
            <div class="name">
              38-地灯
            </div>
            <div class="code-name">.icon38-dideng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon37-ludeng"></span>
            <div class="name">
              37-路灯
            </div>
            <div class="code-name">.icon37-ludeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon36-shuyouqibiaozhi"></span>
            <div class="name">
              36-输油（气）标志
            </div>
            <div class="code-name">.icon36-shuyouqibiaozhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon35-qigan"></span>
            <div class="name">
              35-旗杆
            </div>
            <div class="code-name">.icon35-qigan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon34-bumingligan"></span>
            <div class="name">
              34-不明立杆
            </div>
            <div class="code-name">.icon34-bumingligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon33-teshuligan"></span>
            <div class="name">
              33-特殊立杆
            </div>
            <div class="code-name">.icon33-teshuligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon32-jiaotongligan"></span>
            <div class="name">
              32-交通立杆
            </div>
            <div class="code-name">.icon32-jiaotongligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon31-tongxinligan"></span>
            <div class="name">
              31-通信立杆
            </div>
            <div class="code-name">.icon31-tongxinligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon30-dianliligan"></span>
            <div class="name">
              30-电力立杆
            </div>
            <div class="code-name">.icon30-dianliligan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon29-dianlisheshibiaoshipai"></span>
            <div class="name">
              29-电力设施标识牌
            </div>
            <div class="code-name">.icon29-dianlisheshibiaoshipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon28-dianlisheshi"></span>
            <div class="name">
              28-电力设施
            </div>
            <div class="code-name">.icon28-dianlisheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon27-tongxinjiaojiexiang"></span>
            <div class="name">
              27-通信交接箱
            </div>
            <div class="code-name">.icon27-tongxinjiaojiexiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon26-goucaocesuogaiban"></span>
            <div class="name">
              26-沟槽厕所盖板
            </div>
            <div class="code-name">.icon26-goucaocesuogaiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon25-gongshuiqi"></span>
            <div class="name">
              25-供水器
            </div>
            <div class="code-name">.icon25-gongshuiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon24-shuijing"></span>
            <div class="name">
              24-水井
            </div>
            <div class="code-name">.icon24-shuijing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon23-bumingjinggai"></span>
            <div class="name">
              23-不明井盖
            </div>
            <div class="code-name">.icon23-bumingjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon22-teshujinggai"></span>
            <div class="name">
              22-特殊井盖
            </div>
            <div class="code-name">.icon22-teshujinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon21-shuyouqijinggai"></span>
            <div class="name">
              21-输油（气）井盖
            </div>
            <div class="code-name">.icon21-shuyouqijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon20-gongjiaojinggai"></span>
            <div class="name">
              20-公交井盖
            </div>
            <div class="code-name">.icon20-gongjiaojinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon19-zhongshuijinggai"></span>
            <div class="name">
              19-中水井盖
            </div>
            <div class="code-name">.icon19-zhongshuijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon18-huafenchijinggai"></span>
            <div class="name">
              18-化粪池井盖
            </div>
            <div class="code-name">.icon18-huafenchijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon17-dianlanjinggai"></span>
            <div class="name">
              17-电缆井盖
            </div>
            <div class="code-name">.icon17-dianlanjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon16-youzhengjinggai"></span>
            <div class="name">
              16-邮政井盖
            </div>
            <div class="code-name">.icon16-youzhengjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon15-xinhaodengdianyuanjinggai"></span>
            <div class="name">
              15-信号灯电源井盖
            </div>
            <div class="code-name">.icon15-xinhaodengdianyuanjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon14-yuanlinjinggai"></span>
            <div class="name">
              14-园林井盖
            </div>
            <div class="code-name">.icon14-yuanlinjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon13-xiaofangsheshi"></span>
            <div class="name">
              13-消防设施
            </div>
            <div class="code-name">.icon13-xiaofangsheshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon12-gonganjinggai"></span>
            <div class="name">
              12-公安井盖
            </div>
            <div class="code-name">.icon12-gonganjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon11-ranqijinggai"></span>
            <div class="name">
              11-燃气井盖
            </div>
            <div class="code-name">.icon11-ranqijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon10-relijinggai"></span>
            <div class="name">
              10-热力井盖
            </div>
            <div class="code-name">.icon10-relijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon09-wangluojinggai"></span>
            <div class="name">
              09-网络井盖
            </div>
            <div class="code-name">.icon09-wangluojinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon08-dianshijinggai"></span>
            <div class="name">
              08-电视井盖
            </div>
            <div class="code-name">.icon08-dianshijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon07-tongxinjinggai"></span>
            <div class="name">
              07-通信井盖
            </div>
            <div class="code-name">.icon07-tongxinjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon06-ludengjinggai"></span>
            <div class="name">
              06-路灯井盖
            </div>
            <div class="code-name">.icon06-ludengjinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon05-dianlijinggai"></span>
            <div class="name">
              05-电力井盖
            </div>
            <div class="code-name">.icon05-dianlijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon04-yushuibizi"></span>
            <div class="name">
              04-雨水箅子
            </div>
            <div class="code-name">.icon04-yushuibizi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon03--yushuijinggai"></span>
            <div class="name">
              03--雨水井盖
            </div>
            <div class="code-name">.icon03--yushuijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon02-wushuijinggai"></span>
            <div class="name">
              02-污水井盖
            </div>
            <div class="code-name">.icon02-wushuijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon01-shangshuijinggai"></span>
            <div class="name">
              01-上水井盖
            </div>
            <div class="code-name">.icon01-shangshuijinggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon003"></span>
            <div class="name">
              002
            </div>
            <div class="code-name">.icon003
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon0011"></span>
            <div class="name">
              001
            </div>
            <div class="code-name">.icon0011
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang1_fuzhi1"></span>
            <div class="name">
              矢量智能对象1_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang1_fuzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang_fuzhi2"></span>
            <div class="name">
              矢量智能对象_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang_fuzhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconduigou"></span>
            <div class="name">
              对勾
            </div>
            <div class="code-name">.iconduigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyanzhengma"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.iconyanzhengma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.iconmima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyonghuming"></span>
            <div class="name">
              用户名
            </div>
            <div class="code-name">.iconyonghuming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.iconshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcha"></span>
            <div class="name">
              叉
            </div>
            <div class="code-name">.iconcha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icontianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondian"></span>
            <div class="name">
              点
            </div>
            <div class="code-name">.icondian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon001"></span>
            <div class="name">
              001
            </div>
            <div class="code-name">.icon001
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang_fuzhi1"></span>
            <div class="name">
              矢量智能对象_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang_fuzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang8_fuzhi"></span>
            <div class="name">
              矢量智能对象8_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang8_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang10_fuzhi"></span>
            <div class="name">
              矢量智能对象10_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang10_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang1_fuzhi"></span>
            <div class="name">
              矢量智能对象1_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang1_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang9_fuzhi"></span>
            <div class="name">
              矢量智能对象9_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang9_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang4_fuzhi"></span>
            <div class="name">
              矢量智能对象4_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang4_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang7_fuzhi"></span>
            <div class="name">
              矢量智能对象7_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang7_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang6_fuzhi"></span>
            <div class="name">
              矢量智能对象6_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang6_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang3_fuzhi"></span>
            <div class="name">
              矢量智能对象3_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang3_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang11_fuzhi"></span>
            <div class="name">
              矢量智能对象11_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang11_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang5_fuzhi"></span>
            <div class="name">
              矢量智能对象5_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang5_fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshiliangzhinengduixiang_fuzhi"></span>
            <div class="name">
              矢量智能对象_复制
            </div>
            <div class="code-name">.iconshiliangzhinengduixiang_fuzhi
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#iconshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkefu1"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#iconkefu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkefu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#iconkefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontuceng613kaobei2"></use>
                </svg>
                <div class="name">图层 613 拷贝 2</div>
                <div class="code-name">#icontuceng613kaobei2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaolianmanyifuwu"></use>
                </svg>
                <div class="name">笑脸 满意 服务</div>
                <div class="code-name">#iconxiaolianmanyifuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbumanyi"></use>
                </svg>
                <div class="name">不满意</div>
                <div class="code-name">#iconbumanyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhujiaobohao"></use>
                </svg>
                <div class="name">呼叫拨号</div>
                <div class="code-name">#iconhujiaobohao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguaduan"></use>
                </svg>
                <div class="name">挂断</div>
                <div class="code-name">#iconguaduan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icondianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweijiedianhua"></use>
                </svg>
                <div class="name">未接电话</div>
                <div class="code-name">#iconweijiedianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzidingyiquyu"></use>
                </svg>
                <div class="name">自定义区域</div>
                <div class="code-name">#iconzidingyiquyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbangzhu"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#iconbangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfangda"></use>
                </svg>
                <div class="name">放大01</div>
                <div class="code-name">#iconfangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaozuo_quanpingfangda"></use>
                </svg>
                <div class="name">061操作_全屏放大3</div>
                <div class="code-name">#iconcaozuo_quanpingfangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianjiadaofenzu"></use>
                </svg>
                <div class="name">新建分组</div>
                <div class="code-name">#icontianjiadaofenzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-02gongcezhishipai"></use>
                </svg>
                <div class="name">3-02公厕指示牌</div>
                <div class="code-name">#icon3-02gongcezhishipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-right"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconarrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-left"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconarrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconarrow-right-copy"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#iconarrow-right-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-16shuiqu"></use>
                </svg>
                <div class="name">5-16 水渠</div>
                <div class="code-name">#icon5-16shuiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-15shuita"></use>
                </svg>
                <div class="name">5-15 水塔</div>
                <div class="code-name">#icon5-15shuita</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-14gongdi"></use>
                </svg>
                <div class="name">5-14 工地</div>
                <div class="code-name">#icon5-14gongdi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-13bianyashi"></use>
                </svg>
                <div class="name">5-13 变压室</div>
                <div class="code-name">#icon5-13bianyashi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-11yehuaqizhandian"></use>
                </svg>
                <div class="name">5-11 液化气站点</div>
                <div class="code-name">#icon5-11yehuaqizhandian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-17shedeng"></use>
                </svg>
                <div class="name">4-17 射灯</div>
                <div class="code-name">#icon4-17shedeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-15huanweiqushuishuan"></use>
                </svg>
                <div class="name">4-15 环卫取水栓</div>
                <div class="code-name">#icon4-15huanweiqushuishuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-14jingguanshi"></use>
                </svg>
                <div class="name">4-14 景观石</div>
                <div class="code-name">#icon4-14jingguanshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-13lvdiweihusheshi"></use>
                </svg>
                <div class="name">4-13 绿地维护设施</div>
                <div class="code-name">#icon4-13lvdiweihusheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-12lvhuaqushuishuan"></use>
                </svg>
                <div class="name">4-12 绿化取水栓</div>
                <div class="code-name">#icon4-12lvhuaqushuishuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-11hangdaoshu"></use>
                </svg>
                <div class="name">4-11 行道树</div>
                <div class="code-name">#icon4-11hangdaoshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-20menloupaifang"></use>
                </svg>
                <div class="name">3-20 门楼牌坊</div>
                <div class="code-name">#icon3-20menloupaifang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-19menpai"></use>
                </svg>
                <div class="name">3-19 门牌</div>
                <div class="code-name">#icon3-19menpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-18lajichi"></use>
                </svg>
                <div class="name">3-18 垃圾池</div>
                <div class="code-name">#icon3-18lajichi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-17dianzhaodianpai"></use>
                </svg>
                <div class="name">3-17 店招店牌</div>
                <div class="code-name">#icon3-17dianzhaodianpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-16lajizhongzhuanzhan"></use>
                </svg>
                <div class="name">3-16 垃圾中转站</div>
                <div class="code-name">#icon3-16lajizhongzhuanzhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-15yidongcesuo"></use>
                </svg>
                <div class="name">3-15 移动厕所</div>
                <div class="code-name">#icon3-15yidongcesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-55tingcheshoufeigaoshipai"></use>
                </svg>
                <div class="name">2-55 停车收费告示牌</div>
                <div class="code-name">#icon2-55tingcheshoufeigaoshipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-54tingchegaoshipai"></use>
                </svg>
                <div class="name">2-54 停车告示牌</div>
                <div class="code-name">#icon2-54tingchegaoshipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-53wuzhangaisheshizhilupai"></use>
                </svg>
                <div class="name">2-53 无障碍设施指路牌</div>
                <div class="code-name">#icon2-53wuzhangaisheshizhilupai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-52yingjibinanzhishipai"></use>
                </svg>
                <div class="name">2-52 应急避难指示牌</div>
                <div class="code-name">#icon2-52yingjibinanzhishipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-51jiuzhuzhanzhishipai"></use>
                </svg>
                <div class="name">2-51 救助站指示牌</div>
                <div class="code-name">#icon2-51jiuzhuzhanzhishipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-50jiaojingligan"></use>
                </svg>
                <div class="name">2-50 交警立杆</div>
                <div class="code-name">#icon2-50jiaojingligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-49jiaotongfanshijing"></use>
                </svg>
                <div class="name">2-49 交通反视镜</div>
                <div class="code-name">#icon2-49jiaotongfanshijing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-48jiaotonghandong"></use>
                </svg>
                <div class="name">2-48 交通涵洞</div>
                <div class="code-name">#icon2-48jiaotonghandong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-47jiaotongkongzhixiang"></use>
                </svg>
                <div class="name">2-47 交通控制箱</div>
                <div class="code-name">#icon2-47jiaotongkongzhixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-46jiansudai"></use>
                </svg>
                <div class="name">2-46 减速带</div>
                <div class="code-name">#icon2-46jiansudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-45daolucepingshi"></use>
                </svg>
                <div class="name">2-45 道路侧平石</div>
                <div class="code-name">#icon2-45daolucepingshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-44chehangdao"></use>
                </svg>
                <div class="name">2-44 车行道</div>
                <div class="code-name">#icon2-44chehangdao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-43mangdao"></use>
                </svg>
                <div class="name">2-43 盲道</div>
                <div class="code-name">#icon2-43mangdao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-42gaojialijiaoqiao"></use>
                </svg>
                <div class="name">2-42 高架立交桥</div>
                <div class="code-name">#icon2-42gaojialijiaoqiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-41gonganjingshipai"></use>
                </svg>
                <div class="name">2-41 公安警示牌</div>
                <div class="code-name">#icon2-41gonganjingshipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-40gonganzhishipai"></use>
                </svg>
                <div class="name">2-40 公安指示牌</div>
                <div class="code-name">#icon2-40gonganzhishipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-39gonggongzihangchezhandian"></use>
                </svg>
                <div class="name">2-39 公共自行车站点</div>
                <div class="code-name">#icon2-39gonggongzihangchezhandian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-38jiaotongzhilupai"></use>
                </svg>
                <div class="name">2-38 交通指路牌</div>
                <div class="code-name">#icon2-38jiaotongzhilupai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-37gongjiaozhanpai"></use>
                </svg>
                <div class="name">2-37 公交站牌</div>
                <div class="code-name">#icon2-37gongjiaozhanpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-36renhangdao"></use>
                </svg>
                <div class="name">2-36 人行道</div>
                <div class="code-name">#icon2-36renhangdao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-32zuchezhuang"></use>
                </svg>
                <div class="name">2-32 阻车桩</div>
                <div class="code-name">#icon2-32zuchezhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-75hedaobiaozhijingshipai"></use>
                </svg>
                <div class="name">1-75 河道标志、警示牌</div>
                <div class="code-name">#icon1-75hedaobiaozhijingshipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-74tongfengsheshi"></use>
                </svg>
                <div class="name">1-74 通风设施</div>
                <div class="code-name">#icon1-74tongfengsheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-73gonganjiaojiexiang"></use>
                </svg>
                <div class="name">1-73 公安交接箱</div>
                <div class="code-name">#icon1-73gonganjiaojiexiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-72gongjiaoligan"></use>
                </svg>
                <div class="name">1-72 公交立杆</div>
                <div class="code-name">#icon1-72gongjiaoligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-71ludengpeidianxiang"></use>
                </svg>
                <div class="name">1-71 路灯配电箱</div>
                <div class="code-name">#icon1-71ludengpeidianxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-70bumingteshuligan"></use>
                </svg>
                <div class="name">1-70 不明（特殊）立杆</div>
                <div class="code-name">#icon1-70bumingteshuligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-69shuyouqibiaozhizhuang"></use>
                </svg>
                <div class="name">1-69 输油（气）标志桩</div>
                <div class="code-name">#icon1-69shuyouqibiaozhizhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-68yidongtongxinjizhan"></use>
                </svg>
                <div class="name">1-68 移动通信基站</div>
                <div class="code-name">#icon1-68yidongtongxinjizhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-67tongxinjiaojiexiang"></use>
                </svg>
                <div class="name">1-67 通信交接箱</div>
                <div class="code-name">#icon1-67tongxinjiaojiexiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-66wangluokongzhixiang"></use>
                </svg>
                <div class="name">1-66 网络控制箱</div>
                <div class="code-name">#icon1-66wangluokongzhixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-65minyongshuijing"></use>
                </svg>
                <div class="name">1-65 民用水井</div>
                <div class="code-name">#icon1-65minyongshuijing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-64loutianranqireliguandao"></use>
                </svg>
                <div class="name">1-64 露天燃气热力管道</div>
                <div class="code-name">#icon1-64loutianranqireliguandao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-63kuaheguanxian"></use>
                </svg>
                <div class="name">1-63 跨河管线</div>
                <div class="code-name">#icon1-63kuaheguanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-62tongxunjinggai"></use>
                </svg>
                <div class="name">1-62 通讯井盖</div>
                <div class="code-name">#icon1-62tongxunjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-61wuzhujinggai"></use>
                </svg>
                <div class="name">1-61 无主井盖</div>
                <div class="code-name">#icon1-61wuzhujinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-60xiaofangjinggai"></use>
                </svg>
                <div class="name">1-60 消防井盖</div>
                <div class="code-name">#icon1-60xiaofangjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon1-59jianxiujing"></use>
                </svg>
                <div class="name">1-59 检修井</div>
                <div class="code-name">#icon1-59jianxiujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-09wenwuguji"></use>
                </svg>
                <div class="name">5-09文物古迹</div>
                <div class="code-name">#icon5-09wenwuguji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-08fangxunqiang"></use>
                </svg>
                <div class="name">5-08防汛墙</div>
                <div class="code-name">#icon5-08fangxunqiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-07shuiyuhulan"></use>
                </svg>
                <div class="name">5-07水域护栏</div>
                <div class="code-name">#icon5-07shuiyuhulan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-06shuiyufushusheshi"></use>
                </svg>
                <div class="name">5-06水域附属设施</div>
                <div class="code-name">#icon5-06shuiyufushusheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-05zhongdaweixianyuan"></use>
                </svg>
                <div class="name">5-05重大危险源</div>
                <div class="code-name">#icon5-05zhongdaweixianyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-04yehuaqizhan"></use>
                </svg>
                <div class="name">5-04液化气站</div>
                <div class="code-name">#icon5-04yehuaqizhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-03cheliangjiayouqidianzhan"></use>
                </svg>
                <div class="name">5-03车辆加油（气电站）</div>
                <div class="code-name">#icon5-03cheliangjiayouqidianzhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-02gongfangdixiashi"></use>
                </svg>
                <div class="name">5-02公房地下室</div>
                <div class="code-name">#icon5-02gongfangdixiashi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon5-01renfanggongshi"></use>
                </svg>
                <div class="name">5-01人防工事</div>
                <div class="code-name">#icon5-01renfanggongshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-10penquan"></use>
                </svg>
                <div class="name">4-10喷泉</div>
                <div class="code-name">#icon4-10penquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-09lvdifushusheshi"></use>
                </svg>
                <div class="name">4-09绿地附属设施</div>
                <div class="code-name">#icon4-09lvdifushusheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-08lvdihulan"></use>
                </svg>
                <div class="name">4-08绿地护栏</div>
                <div class="code-name">#icon4-08lvdihulan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-07jietouzuoyi"></use>
                </svg>
                <div class="name">4-07街头座椅</div>
                <div class="code-name">#icon4-07jietouzuoyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-06diaosu"></use>
                </svg>
                <div class="name">4-06雕塑</div>
                <div class="code-name">#icon4-06diaosu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-05huajiahuabo"></use>
                </svg>
                <div class="name">4-05花架花钵</div>
                <div class="code-name">#icon4-05huajiahuabo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-04hushusheshi"></use>
                </svg>
                <div class="name">4-04护树设施</div>
                <div class="code-name">#icon4-04hushusheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-03dulishu"></use>
                </svg>
                <div class="name">4-03独立树</div>
                <div class="code-name">#icon4-03dulishu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-02hangshu"></use>
                </svg>
                <div class="name">4-02行树</div>
                <div class="code-name">#icon4-02hangshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon4-01gushumingmu"></use>
                </svg>
                <div class="name">4-01古树名木</div>
                <div class="code-name">#icon4-01gushumingmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-13zaoshengxianshiping"></use>
                </svg>
                <div class="name">3-13噪声显示屏</div>
                <div class="code-name">#icon3-13zaoshengxianshiping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-12wushuijianceqi"></use>
                </svg>
                <div class="name">3-12污水检测器</div>
                <div class="code-name">#icon3-12wushuijianceqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-11wushuikoujiancezhan"></use>
                </svg>
                <div class="name">3-11污水口监测站</div>
                <div class="code-name">#icon3-11wushuikoujiancezhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-10huanbaojiancezhan"></use>
                </svg>
                <div class="name">3-10环保检测站</div>
                <div class="code-name">#icon3-10huanbaojiancezhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-09qixiangjiancezhan"></use>
                </svg>
                <div class="name">3-09气象监测站</div>
                <div class="code-name">#icon3-09qixiangjiancezhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-08xuanchuanlan"></use>
                </svg>
                <div class="name">3-08宣传栏</div>
                <div class="code-name">#icon3-08xuanchuanlan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-07paibianbiaoshi"></use>
                </svg>
                <div class="name">3-07牌匾标识</div>
                <div class="code-name">#icon3-07paibianbiaoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-06huwaiguanggao"></use>
                </svg>
                <div class="name">3-06户外广告</div>
                <div class="code-name">#icon3-06huwaiguanggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-05lajixiang"></use>
                </svg>
                <div class="name">3-05垃圾箱</div>
                <div class="code-name">#icon3-05lajixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-04lajijianlou"></use>
                </svg>
                <div class="name">3-04垃圾间（楼）</div>
                <div class="code-name">#icon3-04lajijianlou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-03huafenchi"></use>
                </svg>
                <div class="name">3-03化粪池</div>
                <div class="code-name">#icon3-03huafenchi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon3-01gonggongcesuo"></use>
                </svg>
                <div class="name">3-01公共厕所</div>
                <div class="code-name">#icon3-01gonggongcesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-31gangjiansheshi"></use>
                </svg>
                <div class="name">2-31港监设施</div>
                <div class="code-name">#icon2-31gangjiansheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-30shuiyubiaoshipai"></use>
                </svg>
                <div class="name">2-30水域标示牌</div>
                <div class="code-name">#icon2-30shuiyubiaoshipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-29zhanqiao"></use>
                </svg>
                <div class="name">2-29栈桥</div>
                <div class="code-name">#icon2-29zhanqiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-28tiedaokousheshi"></use>
                </svg>
                <div class="name">2-28铁道口设施</div>
                <div class="code-name">#icon2-28tiedaokousheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-27cunchezhijia"></use>
                </svg>
                <div class="name">2-27存车支架</div>
                <div class="code-name">#icon2-27cunchezhijia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-26zihangchezulindian"></use>
                </svg>
                <div class="name">2-26自行车租赁点</div>
                <div class="code-name">#icon2-26zihangchezulindian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-25feijidongchetingfangdian"></use>
                </svg>
                <div class="name">2-25非机动车停放点</div>
                <div class="code-name">#icon2-25feijidongchetingfangdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-24daolugeyinping"></use>
                </svg>
                <div class="name">2-24道路隔音屏</div>
                <div class="code-name">#icon2-24daolugeyinping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-23daoluxinxixianshiping"></use>
                </svg>
                <div class="name">2-23道路信息显示屏</div>
                <div class="code-name">#icon2-23daoluxinxixianshiping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-22rouxinggeliti"></use>
                </svg>
                <div class="name">2-22柔性隔离体</div>
                <div class="code-name">#icon2-22rouxinggeliti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-21biandaozhuang"></use>
                </svg>
                <div class="name">2-21便道桩</div>
                <div class="code-name">#icon2-21biandaozhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-20renhanghengdaozhuang"></use>
                </svg>
                <div class="name">2-20人行横道庄</div>
                <div class="code-name">#icon2-20renhanghengdaozhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-19anquandao"></use>
                </svg>
                <div class="name">2-19安全岛</div>
                <div class="code-name">#icon2-19anquandao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-18fangzhuangtong"></use>
                </svg>
                <div class="name">2-18防撞桶</div>
                <div class="code-name">#icon2-18fangzhuangtong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-17jiaotonghulan"></use>
                </svg>
                <div class="name">2-17交通护栏</div>
                <div class="code-name">#icon2-17jiaotonghulan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-16jiaotonggangting"></use>
                </svg>
                <div class="name">2-16交通岗亭</div>
                <div class="code-name">#icon2-16jiaotonggangting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-15jiaotongxinhaosheshi"></use>
                </svg>
                <div class="name">2-15交通信号设施</div>
                <div class="code-name">#icon2-15jiaotongxinhaosheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-14jiaotongxinhaodeng"></use>
                </svg>
                <div class="name">2-14交通信号灯</div>
                <div class="code-name">#icon2-14jiaotongxinhaodeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-13dimingpai"></use>
                </svg>
                <div class="name">2-13地名牌</div>
                <div class="code-name">#icon2-13dimingpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-12lumingpai"></use>
                </svg>
                <div class="name">2-12路名牌</div>
                <div class="code-name">#icon2-12lumingpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-11xiangaojiabiaozhi"></use>
                </svg>
                <div class="name">2-11限高架标志</div>
                <div class="code-name">#icon2-11xiangaojiabiaozhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-10jiaotongbiaozhipai"></use>
                </svg>
                <div class="name">2-10交通标志牌</div>
                <div class="code-name">#icon2-10jiaotongbiaozhipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-09kuaheqiao"></use>
                </svg>
                <div class="name">2-09跨河桥</div>
                <div class="code-name">#icon2-09kuaheqiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-08lijiaoqiao"></use>
                </svg>
                <div class="name">2-08立交桥</div>
                <div class="code-name">#icon2-08lijiaoqiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-07dixiatongdao"></use>
                </svg>
                <div class="name">2-07地下通道</div>
                <div class="code-name">#icon2-07dixiatongdao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-06guojietianqiao"></use>
                </svg>
                <div class="name">2-06过街天桥</div>
                <div class="code-name">#icon2-06guojietianqiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-05chuzuchezhanpai"></use>
                </svg>
                <div class="name">2-05出租车站牌</div>
                <div class="code-name">#icon2-05chuzuchezhanpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-04gongjiaozhanting"></use>
                </svg>
                <div class="name">2-04公交站亭</div>
                <div class="code-name">#icon2-04gongjiaozhanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-03tingchemibiao"></use>
                </svg>
                <div class="name">2-03停车咪表</div>
                <div class="code-name">#icon2-03tingchemibiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-02liticheku"></use>
                </svg>
                <div class="name">2-02立体车库</div>
                <div class="code-name">#icon2-02liticheku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon2-01tingchechang"></use>
                </svg>
                <div class="name">2-01停车场</div>
                <div class="code-name">#icon2-01tingchechang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon58-shaiyijia"></use>
                </svg>
                <div class="name">58-晒衣架</div>
                <div class="code-name">#icon58-shaiyijia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon57-loutianranqiguandao"></use>
                </svg>
                <div class="name">57-露天燃气管道</div>
                <div class="code-name">#icon57-loutianranqiguandao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon56-kuaheguandao"></use>
                </svg>
                <div class="name">56-跨河管道</div>
                <div class="code-name">#icon56-kuaheguandao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon55-fangwenzha"></use>
                </svg>
                <div class="name">55-防蚊闸</div>
                <div class="code-name">#icon55-fangwenzha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon54-chongdianzhuang"></use>
                </svg>
                <div class="name">54-充电桩</div>
                <div class="code-name">#icon54-chongdianzhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon53-zizhujiaofeiji"></use>
                </svg>
                <div class="name">53-自助缴费机</div>
                <div class="code-name">#icon53-zizhujiaofeiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon52-xiuxiting"></use>
                </svg>
                <div class="name">52-休息亭</div>
                <div class="code-name">#icon52-xiuxiting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon51-zhiangangting"></use>
                </svg>
                <div class="name">51-治安岗亭</div>
                <div class="code-name">#icon51-zhiangangting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon50-jiankongdianziyan"></use>
                </svg>
                <div class="name">50-监控电子眼</div>
                <div class="code-name">#icon50-jiankongdianziyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon49-ranqitiaoyazhanxiang"></use>
                </svg>
                <div class="name">49-燃气调压站（箱）</div>
                <div class="code-name">#icon49-ranqitiaoyazhanxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon48-bianyaqixiang"></use>
                </svg>
                <div class="name">48-变压器（箱）</div>
                <div class="code-name">#icon48-bianyaqixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon47-gaoyaxiantieta"></use>
                </svg>
                <div class="name">47-高压线铁塔</div>
                <div class="code-name">#icon47-gaoyaxiantieta</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon46-jianshensheshi"></use>
                </svg>
                <div class="name">46-健身设施</div>
                <div class="code-name">#icon46-jianshensheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon45-zidongshouhuoji"></use>
                </svg>
                <div class="name">45-自动售货机</div>
                <div class="code-name">#icon45-zidongshouhuoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon44-shouhuoting"></use>
                </svg>
                <div class="name">44-售货亭</div>
                <div class="code-name">#icon44-shouhuoting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon43-xinxiting"></use>
                </svg>
                <div class="name">43-信息亭</div>
                <div class="code-name">#icon43-xinxiting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon42-youtong"></use>
                </svg>
                <div class="name">42-邮筒</div>
                <div class="code-name">#icon42-youtong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon41-dianhuating"></use>
                </svg>
                <div class="name">41-电话亭</div>
                <div class="code-name">#icon41-dianhuating</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon40-baokanting"></use>
                </svg>
                <div class="name">40-报刊亭</div>
                <div class="code-name">#icon40-baokanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon39-jingguandeng"></use>
                </svg>
                <div class="name">39-景观灯</div>
                <div class="code-name">#icon39-jingguandeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon38-dideng"></use>
                </svg>
                <div class="name">38-地灯</div>
                <div class="code-name">#icon38-dideng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon37-ludeng"></use>
                </svg>
                <div class="name">37-路灯</div>
                <div class="code-name">#icon37-ludeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon36-shuyouqibiaozhi"></use>
                </svg>
                <div class="name">36-输油（气）标志</div>
                <div class="code-name">#icon36-shuyouqibiaozhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon35-qigan"></use>
                </svg>
                <div class="name">35-旗杆</div>
                <div class="code-name">#icon35-qigan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon34-bumingligan"></use>
                </svg>
                <div class="name">34-不明立杆</div>
                <div class="code-name">#icon34-bumingligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon33-teshuligan"></use>
                </svg>
                <div class="name">33-特殊立杆</div>
                <div class="code-name">#icon33-teshuligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon32-jiaotongligan"></use>
                </svg>
                <div class="name">32-交通立杆</div>
                <div class="code-name">#icon32-jiaotongligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon31-tongxinligan"></use>
                </svg>
                <div class="name">31-通信立杆</div>
                <div class="code-name">#icon31-tongxinligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon30-dianliligan"></use>
                </svg>
                <div class="name">30-电力立杆</div>
                <div class="code-name">#icon30-dianliligan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon29-dianlisheshibiaoshipai"></use>
                </svg>
                <div class="name">29-电力设施标识牌</div>
                <div class="code-name">#icon29-dianlisheshibiaoshipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon28-dianlisheshi"></use>
                </svg>
                <div class="name">28-电力设施</div>
                <div class="code-name">#icon28-dianlisheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon27-tongxinjiaojiexiang"></use>
                </svg>
                <div class="name">27-通信交接箱</div>
                <div class="code-name">#icon27-tongxinjiaojiexiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon26-goucaocesuogaiban"></use>
                </svg>
                <div class="name">26-沟槽厕所盖板</div>
                <div class="code-name">#icon26-goucaocesuogaiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon25-gongshuiqi"></use>
                </svg>
                <div class="name">25-供水器</div>
                <div class="code-name">#icon25-gongshuiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon24-shuijing"></use>
                </svg>
                <div class="name">24-水井</div>
                <div class="code-name">#icon24-shuijing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon23-bumingjinggai"></use>
                </svg>
                <div class="name">23-不明井盖</div>
                <div class="code-name">#icon23-bumingjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon22-teshujinggai"></use>
                </svg>
                <div class="name">22-特殊井盖</div>
                <div class="code-name">#icon22-teshujinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon21-shuyouqijinggai"></use>
                </svg>
                <div class="name">21-输油（气）井盖</div>
                <div class="code-name">#icon21-shuyouqijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon20-gongjiaojinggai"></use>
                </svg>
                <div class="name">20-公交井盖</div>
                <div class="code-name">#icon20-gongjiaojinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon19-zhongshuijinggai"></use>
                </svg>
                <div class="name">19-中水井盖</div>
                <div class="code-name">#icon19-zhongshuijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon18-huafenchijinggai"></use>
                </svg>
                <div class="name">18-化粪池井盖</div>
                <div class="code-name">#icon18-huafenchijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon17-dianlanjinggai"></use>
                </svg>
                <div class="name">17-电缆井盖</div>
                <div class="code-name">#icon17-dianlanjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon16-youzhengjinggai"></use>
                </svg>
                <div class="name">16-邮政井盖</div>
                <div class="code-name">#icon16-youzhengjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon15-xinhaodengdianyuanjinggai"></use>
                </svg>
                <div class="name">15-信号灯电源井盖</div>
                <div class="code-name">#icon15-xinhaodengdianyuanjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon14-yuanlinjinggai"></use>
                </svg>
                <div class="name">14-园林井盖</div>
                <div class="code-name">#icon14-yuanlinjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon13-xiaofangsheshi"></use>
                </svg>
                <div class="name">13-消防设施</div>
                <div class="code-name">#icon13-xiaofangsheshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon12-gonganjinggai"></use>
                </svg>
                <div class="name">12-公安井盖</div>
                <div class="code-name">#icon12-gonganjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon11-ranqijinggai"></use>
                </svg>
                <div class="name">11-燃气井盖</div>
                <div class="code-name">#icon11-ranqijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon10-relijinggai"></use>
                </svg>
                <div class="name">10-热力井盖</div>
                <div class="code-name">#icon10-relijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon09-wangluojinggai"></use>
                </svg>
                <div class="name">09-网络井盖</div>
                <div class="code-name">#icon09-wangluojinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon08-dianshijinggai"></use>
                </svg>
                <div class="name">08-电视井盖</div>
                <div class="code-name">#icon08-dianshijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon07-tongxinjinggai"></use>
                </svg>
                <div class="name">07-通信井盖</div>
                <div class="code-name">#icon07-tongxinjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon06-ludengjinggai"></use>
                </svg>
                <div class="name">06-路灯井盖</div>
                <div class="code-name">#icon06-ludengjinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon05-dianlijinggai"></use>
                </svg>
                <div class="name">05-电力井盖</div>
                <div class="code-name">#icon05-dianlijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon04-yushuibizi"></use>
                </svg>
                <div class="name">04-雨水箅子</div>
                <div class="code-name">#icon04-yushuibizi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon03--yushuijinggai"></use>
                </svg>
                <div class="name">03--雨水井盖</div>
                <div class="code-name">#icon03--yushuijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon02-wushuijinggai"></use>
                </svg>
                <div class="name">02-污水井盖</div>
                <div class="code-name">#icon02-wushuijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon01-shangshuijinggai"></use>
                </svg>
                <div class="name">01-上水井盖</div>
                <div class="code-name">#icon01-shangshuijinggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon003"></use>
                </svg>
                <div class="name">002</div>
                <div class="code-name">#icon003</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon0011"></use>
                </svg>
                <div class="name">001</div>
                <div class="code-name">#icon0011</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang1_fuzhi1"></use>
                </svg>
                <div class="name">矢量智能对象1_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang1_fuzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang_fuzhi2"></use>
                </svg>
                <div class="name">矢量智能对象_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang_fuzhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconduigou"></use>
                </svg>
                <div class="name">对勾</div>
                <div class="code-name">#iconduigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyanzhengma"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#iconyanzhengma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#iconmima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyonghuming"></use>
                </svg>
                <div class="name">用户名</div>
                <div class="code-name">#iconyonghuming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#iconshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcha"></use>
                </svg>
                <div class="name">叉</div>
                <div class="code-name">#iconcha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icontianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondian"></use>
                </svg>
                <div class="name">点</div>
                <div class="code-name">#icondian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon001"></use>
                </svg>
                <div class="name">001</div>
                <div class="code-name">#icon001</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang_fuzhi1"></use>
                </svg>
                <div class="name">矢量智能对象_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang_fuzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang8_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象8_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang8_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang10_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象10_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang10_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang1_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象1_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang1_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang9_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象9_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang9_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang4_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象4_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang4_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang7_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象7_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang7_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang6_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象6_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang6_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang3_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象3_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang3_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang11_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象11_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang11_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang5_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象5_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang5_fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshiliangzhinengduixiang_fuzhi"></use>
                </svg>
                <div class="name">矢量智能对象_复制</div>
                <div class="code-name">#iconshiliangzhinengduixiang_fuzhi</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
